<template>
    <div class="comfirm_order_page">
        <section v-if="!showLoading">
            <HeaderTop :goBack="true" :headTitle="'订单确认'"></HeaderTop>
            <router-link :to="{path:'/confirmOrder/chooseAddress',query:{id:checkoutData.cart.id,sig: checkoutData.sig}}"
                class="address_container">
                <div class="address_empty_left">
                    <svg class="location_icon">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#location"></use>
                    </svg>
                    <div class="add_address" v-if="!choosedAddress">请添加一个收货地址</div>
                    <div v-else class="address_detail_container">
                        <header>
                            <span>{{choosedAddress.name}}</span>
                            <span>{{choosedAddress.sex == 1? '先生':'女士'}}</span>
                            <span>{{choosedAddress.phone}}</span>
                        </header>
                        <div class="address_detail">
                            <span v-if="choosedAddress.tag" :style="{backgroundColor: iconColor(choosedAddress.tag)}">{{choosedAddress.tag}}</span>
                            <p>{{choosedAddress.address_detail}}</p>
                        </div>
                    </div>
                </div>
                <svg class="address_empty_right">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                </svg>
            </router-link>
            <section class="delivery_model container_style">
                <p class="deliver_text">送达时间</p>
                <section class="deliver_time">
                    <p>尽快送达 | 预计 {{checkoutData.delivery_reach_time}}</p>
                    <p v-if="checkoutData.cart.is_deliver_by_fengniao">蜂鸟专送</p>
                </section>
            </section>
            <section class="pay_way container_style">
                <header class="header_style">
                    <span>支付方式</span>
                    <div class="more_type" @click="showPayWayFun">
                        <span>在线支付</span>
                        <svg class="address_empty_right">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </div>
                </header>
                <section class="hongbo">
                    <span>红包</span>
                    <span>暂时只在饿了么 APP 中支持</span>
                </section>
            </section>
            <section class="food_list container_style">
                <header>
                    <img :src="imgBasePath + checkoutData.cart.restaurant_info.image_path">
                    <span>{{checkoutData.cart.restaurant_info.name}}</span>
                </header>
                <ul class="food_list_ul" v-if="checkoutData.cart.groups">
                    <li v-for="item in checkoutData.cart.groups[0]" :key="item.id" class="food_item_style">
                        <p class="food_name ellipsis">{{item.name}}</p>
                        <div class="num_price">
                            <span>x {{item.quantity}}</span>
                            <span>¥{{item.price}}</span>
                        </div>
                    </li>
                </ul>
                <div class="food_item_style" v-if="checkoutData.cart.extra">
                    <p class="food_name ellipsis">{{checkoutData.cart.extra[0].name}}</p>
                    <div class="num_price">
                        <span></span>
                        <span>¥ {{checkoutData.cart.extra[0].price}}</span>
                    </div>
                </div>
                <div class="food_item_style">
                    <p class="food_name ellipsis">配送费</p>
                    <div class="num_price">
                        <span></span>
                        <span>¥ {{checkoutData.cart.deliver_amount || 0}}</span>
                    </div>
                </div>
                <div class="food_item_style total_price">
                    <p class="food_name ellipsis">订单 ¥{{checkoutData.cart.total}}</p>
                    <div class="num_price">
                        <span>待支付 ¥{{checkoutData.cart.total}}</span>
                    </div>
                </div>
            </section>
            <section class="pay_way container_style">
                <router-link to="/confirmOrder/remark" class="header_style">
                    <span>订单备注</span>
                    <div class="more_type">
                        <span class="ellipsis">{{remarks? remarks: '口味、偏好等'}}</span>
                        <svg class="address_empty_right">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </div>
                </router-link>
                <router-link :to="checkoutData.invoice.is_available? '/confirmOrder/invoice': ''" class="hongbo" :class="{support_is_available: checkoutData.invoice.is_available}">
                    <span>发票抬头</span>
                    <span>
                        {{checkoutData.invoice.status_text}}
                        <svg class="address_empty_right">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </span>
                </router-link>
            </section>
             <section class="confrim_order">
                <p>待支付 ¥{{checkoutData.cart.total}}</p>
                <p @click="confrimOrder">确认下单</p>
            </section>
        </section>
        <Loading v-else></Loading>
        <div class="pop_container">
            <transition name="fade">
                <div class="cover_div" v-if="showPayWay" @click="showPayWay=false"></div>
            </transition>
            <transition name="pop">
                <div class="pop_div" v-if="showPayWay">
                    <header>支付方式</header>
                    <ul class="payment_ul">
                        <li v-for="(item,index) in checkoutData.payments" :key="index" :class="{choose: payWayId == item.id}">
                            <span>{{item.name}}<span v-if="!item.is_online_payment">{{item.description}}</span></span>
                            <svg class="address_empty_right" @click="choosePayWay(item.is_online_payment, item.id)">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
                            </svg>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>
        <transition name="route-slide">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex';
import {checkout} from '@src/api/getData'
import {imgBasePath} from '@src/utils/config'
export default {
    data(){
        return {
            imgBasePath,
            shopCart:null, // 当前店铺购物车
            checkoutData:null, // 数据返回值
            showLoading:true,
            showPayWay:false,
            payWayId:1,
        }
    },
    computed:{
        ...mapState(['geohash','shopId','cartList','user','choosedAddress','remarks','inputText']),
        //备注页返回的信息进行处理
        
    },
    created(){
        this.shopCart=this.cartList[this.shopId];
    },
    mounted(){
        this.initData();
    },
    methods:{
        ...mapActions(['getChooseAddress','saveCartID','submitOrder']),
        async initData(){
            let newArr = [];
            Object.values(this.shopCart).forEach(categoryItem=>{
                Object.values(categoryItem).forEach((itemValue)=>{
                    Object.values(itemValue).forEach((item)=>{
                        newArr.push({
                                attrs: [],
                                extra: {},
                                id: item.id,
                                name: item.name,
                                packing_fee: item.packing_fee,
                                price: item.price,
                                quantity: item.num,
                                sku_id: item.sku_id,
                                specs: [item.specs],
                                stock: item.stock,
                            })
                    })
                })
            })
            //检验订单是否满足条件
            this.checkoutData = await checkout(this.geohash, [newArr], this.shopId);
            this.saveCartID({cart_id: this.checkoutData.cart.id, sig:  this.checkoutData.sig});
            this.getChooseAddress();
            this.showLoading=false;
        },
        //地址备注颜色
        iconColor(name){
            switch(name){
                case '公司': return '#4cd964';
                case '学校': return '#3190e8';
            }
        },
        showPayWayFun(){
            this.showPayWay = !this.showPayWay;
        },
        choosePayWay(isOnline,id){
            if(isOnline === true){
                this.payWayId=id;
                this.showPayWay=false;
            }
        },
        confrimOrder(){
            if(!this.choosedAddress){
                console.log('请选择等收货地址')
                return;
            }
            console.log(this.user,this.user.user_id)
            //保存订单
            this.submitOrder({
                user_id: this.user.user_id,
                cart_id: this.checkoutData.cart.id,
                address_id: this.choosedAddress.id,
                description: this.remarks,
                entities: this.checkoutData.cart.groups,
                geohash: this.geohash,
                sig: this.checkoutData.sig,
            }).then((res)=>{
                if(res.status === 1){
                    this.$router.push({
                        path:'/confirmOrder/payment'
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.comfirm_order_page{
    position: relative;
    padding-top: 1.95rem;
    padding-bottom: 3rem;
    background: #f2f2f2;
    z-index: 10;
    .address_container{
        min-height: 3.5rem;;
        padding: 0 0.6rem;
        @include fj;
        align-items: center;
        background: url('../../assets/imgs/address_bottom.png') left bottom repeat-x ;
        background-color: #fff;
        background-size: auto .12rem;
        .address_empty_left{
            margin-right: 0.5rem;
            flex: 1;
            display: flex;
            align-items: center;
            .location_icon{
                @include wh(0.8rem,0.8rem);
                fill: $green;
                margin-right: 0.3rem;
            }
            .address_detail_container{
                header{
                    span:nth-child(1){
                        @include sc(0.7rem,#333);
                        font-weight: 700;
                    }
                    span:nth-child(2){
                        @include sc(0.6rem,#666);
                    }
                    span:nth-child(3){
                        @include sc(0.6rem,#666);
                    }
                }
                .address_detail{
                    margin-top: 0.1rem;
                    display: flex;
                    span{
                        @include sc(0.5rem , #fff);
                        padding: 0.1rem 0.3rem;
                        border-radius: 0.2rem;
                        margin-right: 0.3rem;
                    }
                    p{
                        @include sc(0.6rem , #666);
                    }
                }
            }
        }
        .address_empty_right{
            @include wh(0.6rem,0.6rem);
            fill: #999;
        }
    }
    .container_style{
        margin-top: 0.5rem;
        padding: 0 0.6rem;
        background-color: #fff;
    }
    .delivery_model{
        display: flex;
        align-items: center;
        min-height: 4rem;
        border-left: 0.2rem solid $blue;
        .deliver_text{
            flex: 1;
            display: flex;
            align-items: center;
            @include sc(0.9rem,#444);
            font-weight: 700;
        }
        .deliver_time{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            p:nth-of-type(1){
                @include sc(0.7rem,$blue);
            }
            p:nth-of-type(2){
                margin-top: 0.5rem;
                @include sc(0.6rem,#fff);
                background-color: $blue;
                border-radius: 0.1rem;
                padding: 0 0.1rem;
            }
        }
    }
    .pay_way{
        .header_style{
            line-height: 2rem;
            @include fj;
            border-bottom: 0.012rem solid #f2f2f2;
            span:nth-of-type(1){
                @include sc(.7rem, #666);
            }
            .more_type{
                display: flex;
                align-items: center;
                span{
                    color: #999;
                }
                .address_empty_right{
                    @include wh(0.6rem,0.6rem);
                    fill: #999;
                }
            }
        }
        .hongbo{
            @include fj;
            span{
                @include sc(.6rem, #aaa);
                line-height: 2rem;
                svg{
                    @include wh(.5rem, .5rem);
                    vertical-align: middle;
                    fill: #ccc;
                }
            }
            span:nth-of-type(2){
                color: #aaa;
            }
            &.support_is_available{
                span:nth-child(1){
                    color: #666;
                }
            }
        }
    }
    .food_list{
        header{
            line-height: 3rem;
            display: flex;
            align-items: center;
            border-bottom: 0.012rem solid #f2f2f2;
            img{
                @include wh(1.2rem,1.2rem);
            }
            span{
                margin-left: 0.5rem;
                @include sc(0.75rem ,#444);
            }
        }
        .food_list_ul{
            margin-top: 0.5rem;
        }
        .food_item_style{
            padding: 0.3rem 0;
            @include fj;
            @include sc(0.65rem ,#999);
            .food_name{
                color: #666;
            }
            .num_price{
                span:nth-of-type(1){
                    color: #ff5722;
                }
                span:nth-of-type(2){
                    margin-left: 1.5rem;
                    color: #999;
                }
            }
        }
        .total_price{
            padding: 0.5rem 0;
            border-top: 0.012rem solid #f2f2f2;
        }
    }
    .confrim_order{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2rem;
        display: flex;
        p:nth-of-type(1){
            line-height: 2rem;
            background-color: #3c3c3c;
            padding-left: 0.5rem;
            @include sc(0.7rem,#fff);
            flex:1;
        }
        p:nth-of-type(2){
            line-height: 2rem;
            background-color: $green;
            padding: 0 0.5rem;
            @include sc(0.7rem,#fff);

        }
    }
    
    .pop_container{
        
        .cover_div{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            z-index: 20;
            background-color: rgba(0,0,0,.3);
        }
        .pop_div{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 22;
            min-height: 10rem;
            background: #FFF;
            header{
                line-height: 2rem;
                text-align: center;
                @include sc(0.7rem,#666);
                background-color: #f5f5f5;
            }
            .payment_ul{

                li{
                    @include fj;
                    padding: 0 0.7rem;
                    line-height: 2.5rem;
                    align-items: center;
                    span{
                        @include sc(.7rem, #ccc);
                    }
                    .address_empty_right{
                       @include wh(0.8rem,0.8rem);
                       fill: #eee;
                    }
                    &.choose{
                        span{
                            color: #333;
                        }
                        svg{
                            fill: #4cd964;
                        }
                    }
                }
            }
        }
    }
}
.route-slide-enter,
.route-slide-leave-to
{
    transform: translateX(4rem);
    opacity: 0;
}
.route-slide-enter-active,
.route-slide-leave-active{
    transition: all 0.3s ease-in-out;
}
.fade-enter,.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,.fade-leave-active{
    transition: all 0.3s;
}
.pop-enter,.pop-leave-to{
    transform: translateY(100%);
    
}
.pop-enter-active,.pop-leave-active{
    transition: all 0.3s ease-in-out;
}
</style>